<template>
  <div class="app">
    <list :style="{height:heightNum+'px'}">
      <cell>
        <div>
          <myNavbar title="商家信息"></myNavbar>
          <banner class="banner">
            <div class="banner-frame" v-for="img in adList">
              <image class="banner-image"  :src="img.thumbnail"></image>
            </div>
          </banner>
          <div class="merchantInformation">
            <div class="merchantInformation-item">
              <div class="imerchantInformation-item-left">
                <div class="imerchantInformation-name">
                  <text class="imerchantInformation-name-text font-blod">{{storeDetails.name}}</text>
                </div>
                <div class="imerchantInformation-score">
                  <text class="imerchantInformation-score-text">5分人气</text>
                </div>
              </div>
              <div class="imerchantInformation-item-right">
                <div class="offline"></div>
                <div class="imerchantInformation-share-wrap" @click="shareClick">
                  <div class="imerchantInformation-share">
                    <image class="imerchantInformation-share-image"
                           src="https://lsh-1303308562.cos.ap-beijing.myqcloud.com/static/img/lianqu/icon/share.png"></image>
                  </div>
                  <div class="imerchantInformation-share" >
                    <text class="imerchantInformation-share-text">分享</text>
                  </div>
                </div>
              </div>
            </div>

            <div class="merchantInformation-item">
              <div class="imerchantInformation-item-left">
                <div class="imerchantInformation-name">
                  <text class="imerchantInformation-name-text">营业中 每天 08:00:00-22:00:00</text>
                </div>
              </div>
              <div class="imerchantInformation-item-right">
                <div class="offline"></div>
                <div class="imerchantInformation-share-wrap" @click="contactMerchant">
                  <div class="imerchantInformation-share">
                    <image class="imerchantInformation-share-image"
                           src="https://lsh-1303308562.cos.ap-beijing.myqcloud.com/static/img/lianqu/icon/call.png"></image>
                  </div>
                  <div class="imerchantInformation-share">
                    <text class="imerchantInformation-share-text">联系商家</text>
                  </div>
                </div>
              </div>
            </div>

            <div class="merchantInformation-item">
              <div class="imerchantInformation-item-left">
                <div class="imerchantInformation-name">
                  <text class="imerchantInformation-name-text">{{storeDetails.address}}</text>
                  <!--                  <text class="imerchantInformation-name-text">福建省厦门市思明区软件园二期望海路51号距离约11.6km</text>-->
                </div>
              </div>
              <div class="imerchantInformation-item-right">
                <div class="offline"></div>
                <div class="imerchantInformation-share-wrap">
                  <div class="imerchantInformation-share"  @click="navigationClick">
                    <image class="imerchantInformation-share-image"
                           src="https://lsh-1303308562.cos.ap-beijing.myqcloud.com/static/img/lianqu/icon/navigation.png"></image>
                  </div>
                  <div class="imerchantInformation-share">
                    <text class="imerchantInformation-share-text">导航</text>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="merchantIntroduction center">

            <div @click="toCategory" class="shoppingarea center" style="margin-bottom: 20px;background-color:#ff8400">
              <div class="exchangeCertificate-name">
                <text class="exchangeCertificate-name-text" style="color: white;">进入购物区</text>
              </div>
            </div>

            <div v-if="storeDetails.profitTransfer" class="exchangeCertificate">
              <div class="exchangeCertificate-git">
                <text class="exchangeCertificate-give-text">送</text>
              </div>
              <div class="exchangeCertificate-name">
<!--                <text class="exchangeCertificate-name-text">100%兑换券</text>-->
                <text class="exchangeCertificate-name-text">{{storeDetails.profitTransfer * 5}}%兑换券</text>
              </div>
            </div>

            <div class="merchantProfile" v-if="storeDetails.content">
              <text class="merchantProfile-text">商家介绍</text>
            </div>
            <div class="merchantProfileContent">
              <!--              <text class="merchantProfileContent-text">欢迎入驻联生活!!!-->
              <!--                联生活-联合购物好生活，我们的宗旨是为消费者打造优质实惠的好生活。致力于联区，打造线上线下消费增值服务平台。欢迎光临！！！联生活为您服务!-->
              <!--              </text>-->
<!--              <text>{{storeDetails.content}}</text>-->
              <html  :content="storeDetails.content" :imgWidth="750"></html>

            </div>
          </div>

          <div class="merchantIntroduction-botton" @click="toCashie">
            <div class="MerchantPayment-botton">
              <div class="MerchantPayment-botton-contain">
                <text class="MerchantPayment-botton-text">向商家付款</text>
              </div>
            </div>
          </div>



          <!--          <div class="storeDetails" :style="{height:heightNum+'px'}">-->
          <!--            <div class="coupon_choose">-->
          <!--              <div class="coupon_choose-list" @click="swichNav('1')">-->
          <!--                <text :class="[currentTab==1?'coupon_choose_title':'coupon_choose_title_no']">购物</text>-->
          <!--                <text :class="[currentTab==1?'coupon_choose_line_no':'']"></text>-->
          <!--              </div>-->
          <!--              <div class="coupon_choose-list" @click="swichNav('0')">-->
          <!--                <text :class="[currentTab==0?'coupon_choose_title':'coupon_choose_title_no']">商家介绍</text>-->
          <!--                <text :class="[currentTab==0?'coupon_choose_line_no':'']"></text>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--            <div class="shoppingList">-->
          <!--              <div class="shoppingList-nav">-->
          <!--                <list style="flex: 1">-->
          <!--                  <cell v-for="(item,index) in 100">-->
          <!--                    <div class="shoppingList-nav-title-wrap">-->
          <!--                      <text class="shoppingList-nav-title">美味烤鸡{{index}}</text>-->
          <!--                    </div>-->
          <!--                  </cell>-->
          <!--                </list>-->
          <!--              </div>-->
          <!--              <div class="shoppingList-list">-->
          <!--                <div class="shoppingList-list-title">-->
          <!--                  <text class="shoppingList-list-title-text">招牌意大利手工保底披萨</text>-->
          <!--                </div>-->
          <!--                <div class="shoppingList-list-item">-->
          <!--                  <div class="shoppingList-list-item-image-wrap">-->
          <!--                    <image class="shoppingList-list-item-image"></image>-->
          <!--                  </div>-->
          <!--                  <div class="shoppingList-list-item-contain">-->
          <!--                    <div>-->
          <!--                      <text class="shoppingList-list-item-contain-name">芒果劈杀</text>-->
          <!--                    </div>-->
          <!--                    <div>-->
          <!--                      <text class="shoppingList-list-item-contain-quantity">月售9</text>-->
          <!--                    </div>-->
          <!--                    <div class="shoppingList-list-item-contain-price">-->
          <!--                      <div>-->
          <!--                        <text class="shoppingList-list-item-contain-sellingPrice">¥98</text>-->
          <!--                        <text class="shoppingList-list-item-contain-originalPrice">¥98</text>-->
          <!--                      </div>-->
          <!--                      <div class="item-add-wrap">-->
          <!--                        <image class="item-add"></image>-->
          <!--                      </div>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <!--                </div>-->
          <!--                <div class="shoppingList-list-item">-->
          <!--                  <div class="shoppingList-list-item-image-wrap">-->
          <!--                    <image class="shoppingList-list-item-image"></image>-->
          <!--                  </div>-->
          <!--                  <div class="shoppingList-list-item-contain">-->
          <!--                    <div>-->
          <!--                      <text class="shoppingList-list-item-contain-name">芒果劈杀</text>-->
          <!--                    </div>-->
          <!--                    <div>-->
          <!--                      <text class="shoppingList-list-item-contain-quantity">月售9</text>-->
          <!--                    </div>-->
          <!--                    <div class="shoppingList-list-item-contain-price">-->
          <!--                      <div>-->
          <!--                        <text class="shoppingList-list-item-contain-sellingPrice">¥98</text>-->
          <!--                        <text class="shoppingList-list-item-contain-originalPrice">¥98</text>-->
          <!--                      </div>-->
          <!--                      <div class="item-add-wrap">-->
          <!--                        <image class="item-add"></image>-->
          <!--                      </div>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <!--                </div>-->

          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->



          <!--      <div class="storeSettlement">-->
          <!--        <div class="storeSettlement-image-wrap">-->
          <!--          <div class="center">-->
          <!--            <image class="storeSettlement-image" ></image>-->
          <!--          </div>-->
          <!--          <div class="center">-->
          <!--            <text class="storeSettlement-image-text">未加入购物商品</text>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="storeSettlement-title center">-->
          <!--          <text class="storeSettlement-title-text">结算</text>-->
          <!--        </div>-->
          <!--      </div>-->


        </div>
      </cell>
    </list>
  </div>
</template>

<script>
const communication = app.requireModule("eeui/communication");
const eeui = app.requireModule('eeui');
const amap = app.requireModule('eeui/amap');

import {
  find
} from '@/api/shop'
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
import html from '../../../components/html/html.vue'

export default {
  name: "nearbyShopsDetails.vue",
  data() {
    return {
      times:null,
      currentTab: 1,
      heightNum:WXEnvironment.deviceHeight-770,
      storeDetails:{},
      adList: [
        { thumbnail: 'http://cdnx.365.rzico.com/10200/upload/20211222/9c4e021b-b5cb-489c-a109-3b2b851b8dd3.jpg'},
        { thumbnail: 'http://cdnx.365.rzico.com/10200/upload/20211220/09afbc15-e441-4db1-a334-ae043c4027f8.jpg'},
        { thumbnail: 'http://cdnx.365.rzico.com/10200/upload/20211220/097e9642-5c18-4b9d-ab68-5073d6c0fcd8.jpg'},
        { thumbnail: 'http://cdnx.365.rzico.com/10200/upload/20211220/0750acfb-d727-4f6f-9c7a-cc34782bb56c.jpg'},
        { thumbnail: 'http://cdnx.365.rzico.com/10200/upload/20211220/1d180f36-fb67-4174-8259-8810642dfbb2.jpg'}
      ]
    };
  },
  components: {
    myNavbar,
    html
  },
  created() {
    // console.log(app.config.params)
    this.getDetails(app.config.params)
  },
  methods: {
    navigationClick() {
      var _this = this
      // var lat = _this.orderFormFind.lat
      // var lng = _this.orderFormFind.lng

      var data = {
        dlat: this.storeDetails.lat,
        dlon: this.storeDetails.lng
      };


      amap.startNaviGao(data, function (res) {
        // console.log(res)
        eeui.toast(res.content)
      })
    },

    shareClick(){
      eeui.shareText("如果你喜欢 eeui，可以通过 Star 来表示，https://github.com/kuaifan/eeui");
    },
    contactMerchant(){
      communication.call('415-736-0000')
    },
    toCashie(){
      eeui.openPage({
        url: 'root://pages/member/nearbyShopsDetails/cashie.js',
        params: app.config.params,
        statusBarType: 'immersion',
        statusBarStyle: false
      });
    },

    toCategory(){
      new Promise((resolve, reject) => {
        // this.storeDetails.id
        storage.setItem('shopId',this.storeDetails, event => {
          resolve()
        })
      }).then(() => {
        eeui.openPage({
          url: 'root://pages/member/nearbyShopsDetails/category.js',
          statusBarType: 'immersion',
          statusBarStyle: false
        });
      })


    },
    getDetails(item) {
      let params = item.id
      // let params = "74"
      find(params).then(res => {
        if(res.data.adList.length > 0){
          this.adList = []
          res.data.adList.forEach(item=>{
            if(item.tags[0].name == '轮播图'){
              this.adList.push(item)
            }
          })
        }
        this.storeDetails = res.data.shop
        while(this.storeDetails.content.indexOf("&mdash") != -1 ||this.storeDetails.content.indexOf("&rdquo") != -1 || this.storeDetails.content.indexOf("&ldquo") != -1) {
          this.storeDetails.content =  res.data.shop.content.replace("&mdash","")
          this.storeDetails.content =  res.data.shop.content.replace("&rdquo","")
          this.storeDetails.content =  res.data.shop.content.replace("&ldquo","")
        }

      })
    }
  }

}
</script>
<style scoped>
.app {
  flex: 1;
  background-color: rgb(248, 248, 248);
}
.banner {
  width: 750px;
  height: 330px;
  /*background-color: orange;*/
}
.banner-iamge{
  width: 750px;
  height: 330px;
}

.merchantInformation {
  margin-top: 20px;
  padding-bottom: 60px;
  background-color: white;
}

.merchantInformation-item {
  padding-left: 30px;
  padding-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /*width: 660px;*/
  width: 700px;
  height: 130px;
}

.imerchantInformation-item-right {
  display: flex;
  flex-direction: row;
  align-items: center;

}

.imerchantInformation-item-left {
  width: 500px;

}

.imerchantInformation-name-text {
  font-size: 30px;
}

.imerchantInformation-score {
  margin-top: 20px;
}

.imerchantInformation-score-text {
  padding-bottom: 20px;
  font-size: 28px;
}

.imerchantInformation-share {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.imerchantInformation-share-image {
  width: 40px;
  height: 40px;
}

.imerchantInformation-share-text {
  font-size: 16px;
}

.offline {
  margin-right: 30px;
  width: 4px;
  height: 50px;
  background-color: lightgray;
}

.font-blod {
  font-weight: bold;
  font-size: 38px;
}

.merchantIntroduction {
  padding-top: 20px;
  margin-top: 20px;
  /*height: 500px;*/
  padding-left: 20px;
  background-color: white;
  /*background-color: yellowgreen;*/
}
.shoppingarea{
  border-radius: 50px;
  width: 300px;
  height: 80px;
}
.exchangeCertificate {
  border-radius: 16px;
  width: 700px;
  height: 80px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #3c8bd8;

  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #3c8bd8;

  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #3c8bd8;

  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #3c8bd8;

  display: flex;
  flex-direction: row;
  align-items: center;
}

.exchangeCertificate-git {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  background-color: #369bfa;
  border-radius: 8px;

}

.exchangeCertificate-give-text {
  color: white;
  font-size: 28px;
}

.exchangeCertificate-name {
  margin-left: 10px;
}

.exchangeCertificate-name-text {
  font-size: 32px;
}

.merchantProfile {
  padding-top: 40px;
}

.merchantProfile-text {
  margin-top: 40px;
  font-size: 40px;
  font-weight: bold;
}

.merchantProfileContent-text {
  font-size: 25px;
}

.merchantProfileContent {
  margin-top: 20px;
  padding-bottom: 20px;
}
.MerchantPayment-botton{
  margin-top: 20px;
  margin-bottom: 20px;
  width: 710px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.MerchantPayment-botton-contain {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /*background-color: #ff6931;*/
  background-color: #ff8400;
  /*width: 680px;*/
  width: 520px;
  border-radius: 50px;
}

.MerchantPayment-botton-text {
  font-size: 32px;
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}

.merchantIntroduction-botton {
  position: fixed;
  bottom: 0px;
  left:20px;
  background-color: white;
}

.imerchantInformation-share-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.coupon_choose {
  /* position: fixed; */
  width: 750px;
  text-align: center;
  line-height: 80px;
  padding-left: 26px;
  padding-right: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 76px;
  background-color: #fff;
}

.coupon_choose-list {
  flex: 1;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coupon_choose_title {
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(215, 38, 28, 1);
  margin-bottom: 5px;
}

.coupon_choose_title_no {
  /*font-size: 28px;*/
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(102, 102, 102, 1);
}

.coupon_choose_line {
  width: 34px;
  height: 6px;
}

.coupon_choose_line_no {
  background-color: rgb(231, 91, 83);
  height: 4px;
  width: 50px;
}


.storeDetails {
  margin-left: 20px;
  margin-top: 20px;
  width: 710px;
  background-color: white;
  flex: 1;
}

.shoppingList {
  width: 710px;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex:1
}

.shoppingList-nav {
  width: 150px;
  /*height:600px;*/
  background-color: #f2f2f2;
  overflow: scroll;
  scrollbar-width: none;

}

.shoppingList-nav-title-wrap {
  width: 150px;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.shoppingList-nav-title {
  font-size: 24px;
  max-width: 120px;

}


.shoppingList-list {
  box-sizing: border-box;
  width: 540px;
  height: 600px;
  overflow: scroll;
  scrollbar-width: none;
}

shoppingList-list-title {
  width: 540px;
}

.shoppingList-list-title-text {
  font-size: 30px;
  padding-left: 10px;
}

.shoppingList-list-item {
  display: flex;
  flex-direction: row;
  width: 540px;
  height: 180px;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 20px;
}

.shoppingList-list-item-contain {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
}

.shoppingList-list-item-image {
  width: 180px;
  height: 180px;
  border-radius: 16px;
  background-color: orange;
}

.item-add {
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 50px;
}

.shoppingList-list-item-contain-name {
  font-size: 28px;
}

.shoppingList-list-item-contain-quantity {
  font-size: 24px;
  color: lightgray;
}

.shoppingList-list-item-contain-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.shoppingList-list-item-contain-sellingPrice {
  font-size: 32px;
  color: #fe6d6d;
}

.shoppingList-list-item-contain-originalPrice {
  margin-left: 20px;
  font-size: 28px;
  color: #a0a0a0;
}

.item-add-wrap {
  margin-right: 20px;
}


.storeSettlement {
  position: fixed;
  bottom: 0;
  left: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  width: 710px;
  height: 150px;
  box-sizing: border-box;
  background-color: white;
}

.storeSettlement-image {
  width: 85px;
  height: 85px;
  background-color: red;
  border-radius: 50px;
}

.storeSettlement-image-wrap {
  display: flex;
  flex-direction: row;
  width: 380px;
}

.storeSettlement-image-text {
  margin-left: 20px;
  font-size: 32px;
  color: #cfcfcf;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.storeSettlement-title {
  width: 200px;
  height: 60px;
  background-color: #e71418;
  border-radius: 50px;
}

.storeSettlement-title-text {
  font-size: 32px;
  color: white;
}

















.banner {
  width: 750px;
  height: 300px;
}

.banner-frame {
  width: 750px;
  height: 300px;
  position: relative;
}

.banner-image {
  width: 750px;
  height: 300px;
}


</style>
